<template>
    <div class="addfile">
        <div class="input-group " style="width: 300px;" >
        <div class="input-group-prepend">
            <span class="input-group-text">文件名</span>
        </div>
        <input type="text" 
        v-model="file.name"
        name="文件名"
        v-validate="{ 
        required: true , 
        'illegalchar': true ,
        'max': 20
        }" 
        maxlength="21"
        :class="{ 'is-invalid' : errors.first('文件名') }"
        placeholder="请输入文件名"
        class="form-control rounded-right " required>
        <div class="invalid-feedback">
            {{ errors.first('文件名') }}
        </div>
        </div>
        <div class="mt-2 rmDir-prompt-opr d-flex justify-content-center align-items-center">
            <button type="button" class="m-1 btn btn-secondary"
            @click="cancle"
            >取消</button>
            <button type="button" class="m-1 btn btn-danger"
            @click="postdata"
            >确定</button>
        </div>
        <div 
        v-if="target.info"
        class="text-danger mt-2 rmDir-prompt-opr d-flex justify-content-center align-items-center  ">
            {{target.info}}
        </div>
    </div>
</template>

<script>
import { createArticle } from "../../../../api/interface/filesystem.js";
import { freshToken } from "../../../../api/interface/token.js";


//工具模块
import { tools } from "../../../../api/tools.js"; 

export default {
    data(){
        return {
            file:{
                name:""
            },
            target:{
                info:''
            }
        };
    },
    inject:['noteAgent'],
    methods:{
        cancle(){
            this.resetData();
            let note = this.noteAgent();
            note.popup.mkfile = false;
        },
        confirm(){
            let that = this;
            let curDir = this.$store.getters.getCurrentItem;
            if( !curDir ){
                //尚未选定上级目录
                this.target.info="尚未选定笔记本";
                return ;
            }
            let fileName = this.file.name;
            let crtF = { title : fileName };
            if( curDir.top_id ){
                crtF.top_id = curDir.top_id;
            }
            if( curDir.inner_id ){
                crtF.inner_id = curDir.inner_id;
            }
            

            createArticle( crtF ).then( crtFileRes => {
                
                
                let note = this.noteAgent();
                
                note.$refs.exploreFile.innerDirlist.push( crtFileRes.data.data );
                this.cancle();
            } ).catch(err=>{
                
                this.$httpError.checkResStatus(err.data,function(){
                    
                    //重新请求生成token
                    freshToken().then(res=>{
                        
                        localStorage.setItem("token", res.data.data.token);
                        that.confirm( );
                    })
                },that)
            });
        },
        resetData(){
            this.file.name = "";
        },
        //重新获取当前目录内容
        refetchCurrentTopDirData(){
            let note = this.noteAgent();
            note.$refs.exploreFile.fatchData(0,20);
        },
        //校验文件明后提交请求
        validateDateThenSubmit(){
            this.$validator.validate().then(result => {
                if (!result) {
                    if (this.errors.has('文件名')) {
                        console.log("error: ", this.errors);
                        return
                    } 
                } else {
                    this.confirm();   // 验证通过后请求接口的方法
                }
            });
        },
        //使用防抖控制提交请求
        postdata: tools.debounceWithTrigger( function(){
            this.validateDateThenSubmit();
        } , 1000 , true)
    }
}
</script>

<style lang="scss">

.addfile{
    display: inline-block;
    margin: 1.5em;
}
</style>